<template>
    <div>
        <mt-header :title="longTitle">
            <router-link to="/Authentication" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <process :tocolor="tocolor"></process>
        <div class="PeoplePicture">
            <div class="PeoplePictureDiv">商户场所信息</div>
            <!--<PeoplePicture :PeoplePicture="PeoplePicture" @photo="photoNext"></PeoplePicture>-->
            <uploadImg :img-url="imgurl1" @change="change1" @getImgData="getImgData1"></uploadImg>
            <uploadImg :img-url="imgurl2" @change="change2" @getImgData="getImgData2"></uploadImg>

            <div class="mar-2r">
                <ShowListInput :needData="needData" :placeholder="placeholder" @inputChange="inputChange" :inputValue="inputValue"></ShowListInput>
            </div>
        </div>
        <com-button btnClass="next-btn" @btn-click="goTo"
                    :disabled="nextBtnDisabled">下一步</com-button>
    </div>
</template>

<script>
    import MyButton from '@/components/MyButton.vue'
    import process from '@/components/process.vue'
    import ShowListInput from '@/components/ShowListInput.vue'
    import {Header} from 'mint-ui'
    import Upload from 'element-ui'
    import { AXIOS_POST } from '@/lib/axios'
    import  {Tools}  from '@/lib/tools'
    import router from "@/router"
    import { mapState,mapMutations } from 'vuex'
    import ComButton from '@/components/com-button.vue'
    import { SHOPPHOTO_NEXT_BUTTON_CHECK ,GET_SHOP_INPUT} from '../store/types'
    import { Toast } from 'mint-ui';
    import uploadImg from '@/components/Upload-img.vue'


    export default {
        name: "shopphoto",
        components: {
            MyButton,
            process,
            ShowListInput,
            Header,
            Upload,
            ComButton,
            uploadImg
        },
        computed: {
            ...mapState('shopPhoto',['inputValue','nextBtnDisabled','imgurl1','imgurl2','shopPhoto1','shopPhoto2'])
        },
        data() {
            return {
                shopName:'',
                ButtonNext: '下一步',
                tocolor:{color: '#2dbbfd'},
                needData: '商户门面名称',
                placeholder: '请填入和门头照片一致的名字(必填)',
                longTitle:'店铺信息验证',



            }
        },
        methods:{
            ...mapMutations('shopPhoto',[GET_SHOP_INPUT,SHOPPHOTO_NEXT_BUTTON_CHECK]),
            inputChange(value){
                this.GET_SHOP_INPUT(value)
                this.SHOPPHOTO_NEXT_BUTTON_CHECK()
            },
            change1 ( e ) {
                this.$store.state.shopPhoto.imgurl1 = e;
            },
            change2 ( e ) {
                this.$store.state.shopPhoto.imgurl2 = e
            },

            getImgData1(data){
                this.$store.state.shopPhoto.doorHeadPhotoPath=data.file_path;
                this.$store.state.shopPhoto.doorHeadPhotoSize=data.file_size;
                this.$store.state.shopPhoto.shopPhoto1='门头照片'+','+'0005'+','+data.file_path+','+data.file_size
                this.SHOPPHOTO_NEXT_BUTTON_CHECK()
                console.log( this.$store.state.shopPhoto.shopPhoto1)
            },
            getImgData2(data){
                this.$store.state.shopPhoto.indoorPhotosPath=data.file_path;
                this.$store.state.shopPhoto.indoorPhotosSize=data.file_size;
                this.$store.state.shopPhoto.shopPhoto2='室内照片'+','+'0015'+','+data.file_path+','+data.file_size
                this.SHOPPHOTO_NEXT_BUTTON_CHECK()
            },

            goTo(){
                if(Tools.check.isEmpty(this.inputValue)){
                    Toast("请填入必填项");
                    return
                }
                router.push( 'companyAddress' )
            }

        }
    }
</script>

<style scoped>
    .PeoplePictureDiv {
        text-align: left;
        padding-bottom: 10px;
        padding-top: 10px;
        font-size: 0.9rem;
        border-bottom: 1px solid #e0e3ea;
        margin-bottom: 20px
    }

    .PeoplePicture {
        /*padding: .875rem;*/
        padding-left: .875rem;
        padding-right: .875rem;
        background: white;
    }
    .mar-2r{
        margin-top: 2rem;
        border-top:  1px solid #e0e3ea;
    }


    .el-icon-plus1:before {
        content:  url("../assets/ShopPhoto/u117.png");
    }

    .el-icon-plus2:before {
        content:  url("../assets/ShopPhoto/u118.png")
    }
</style>